<template>
    <div>
        <el-row class="wathdra_record">
            <el-col :span="24" class="leave_header_title">
                <div class="leave_title">
                    <div class="leave_left">会员等级管理</div>
                    <div class="leave_right choose_right_input">
                        <!--<el-dropdown trigger="click" @command="handleCommand">-->
                            <!--<span class="el-dropdown-link dropdown_style">-->
                            <!--企业等级筛选<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>-->
                            <!--</span>-->
                            <!--<el-dropdown-menu slot="dropdown">-->
                                <!--<el-dropdown-item v-for="item in leaveListData" :key="item.value" :command="item">{{item.label}}</el-dropdown-item>-->
                            <!--</el-dropdown-menu>-->
                        <!--</el-dropdown>-->
                        <label class="label_style_slect">企业等级筛选</label>
                        <el-select v-model="form.leave" class="leave_select_right" placeholder="请选择" @change="handleCommand">
                            <el-option
                                    v-for="item in leaveListData"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                        <div>
                            <el-input type="text" placeholder="请输入关键字" v-model="form.keyWord" clearable @clear="chooseLeave()"></el-input><el-button type="primary" size="small" @click="chooseLeave()">搜索</el-button>
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column type="index" label="序号" width="55"> </el-table-column>
            <el-table-column label="企业等级">
                <template slot-scope="scope">
                    <i class="bill_source">
                        <img src="https://hpx-pc.oss-cn-beijing.aliyuncs.com/hpxpic/NO_1.png" alt="" v-if="scope.row.enterpriseLevel == '金牌'">
                        <img src="https://hpx-pc.oss-cn-beijing.aliyuncs.com/hpxpic/NO_2.png" alt="" v-if="scope.row.enterpriseLevel == '银牌'">
                        <img src="https://hpx-pc.oss-cn-beijing.aliyuncs.com/hpxpic/NO_3.png" alt="" v-if="scope.row.enterpriseLevel == '铜牌'">
                    </i>{{scope.row.enterpriseLevel}}
                </template>
            </el-table-column>
            <el-table-column prop="enterpriseName" label="企业名称"> </el-table-column>
            <el-table-column prop="customerName" label="企业联系人"> </el-table-column>
            <el-table-column prop="phoneNumber" label="联系方式"> </el-table-column>
            <el-table-column label="初步注册时间">
                <template slot-scope="scope">
                    <span>{{scope.row.createTimeY}}</span><br/><span>{{scope.row.createTimeH}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="enterpriseLevelDes" label="描述"> </el-table-column>
            <!--<el-table-column fixed="right" label="操作">-->
                <!--<template slot-scope="scope" class="opert_btn">-->
                    <!--<el-button type="text" size="small" @click="detailEnterpriseInfo(scope.row)"><i class="iconfont icon-xiangqing icon_edit_style"></i> 详情</el-button>-->
                <!--</template>-->
            <!--</el-table-column>-->
        </el-table>
        <div class="right clear">
            <el-pagination
                    @size-change="onSizeChange"
                    @current-change="onFlipOver"
                    :current-page="pagination.currentPage"
                    :page-sizes="pagination.pageSizes"
                    :page-size="pagination.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pagination.total">
            </el-pagination>
        </div>
        <MemberDetail ref="memberdetail"></MemberDetail>
    </div>    
</template>

<script lang="ts">
    import { Vue, Component } from 'vue-property-decorator';
    import Pagination from "@/types/Pagination";
    import { leaveTypes } from '@/util/constantStatus';
    import { State, Getter, Action, Mutation, namespace } from 'vuex-class';
    import MemberDetail from '@component/manage/member/Detail.vue';
    import moment from 'moment';
    var memberStore = namespace('member')
    @Component({
        extends: Pagination,
        components: {
            MemberDetail
        }
    })
    export default class LeaveManage extends Vue {
        @memberStore.Action('loadPlatformDetail') loadPlatformDetail!:Function;
        tableData = []
        leaveListData = leaveTypes;
        form = {
            keyWord: '',
            leave: ''
        }
        memberStatus = {
            platform: 0,
            fumin: 0
        };
        get memberState() {
            return Number(this.memberStatus.platform)
        }
        async getAllLeave () {
            let parameter = {
                currentPage: this.pagination.currentPage,
                pageSize: this.pagination.pageSize,
                keyWord: this.form.keyWord,
                level: this.form.leave
            }
            let res = await this.$http.post('enterpriseLevel/list', parameter)
            if (res.status == 200) {
                let { items, totalNum } = res.data;
                items.forEach((i) => {
                    i.createTimeY = moment(i.createTime).format('YYYY-MM-DD')
                    i.createTimeH = moment(i.createTime).format('HH:mm:ss')
                })
                this.tableData = items;
                this.pagination.total = totalNum;
            }
        }
        detailEnterpriseInfo (row: any) {
            const self = this;
            const memberState = this.getCurrentRowStatus(row);
            this.loadPlatformDetail({
                customerId: row.customerId,
                enterpriseId: row.enterpriseId,
                inviterName: row.inviterName,
                agentTreasurerId: row.agentTreasurerId,
                bankAccountId: row.bankAccountId,
                number: memberState
            }).then((res)=>{
                if (!res.data) {
                    self.$notify({
                        title: '消息',
                        message: '数据为空',
                    });
                    return
                }
                self.$refs.memberdetail.open(memberState);
            })
        }
        getCurrentRowStatus({ currentStatus }:any) {
            // var status = 4
            // return status;
            var status = 0
            if (this.memberState === 0) {
                if(currentStatus > 10 && currentStatus < 20) {
                    status = 1;
                }
                if(currentStatus > 20 && currentStatus < 30) {
                    status = 2;
                }
                if(currentStatus > 30 && currentStatus < 40) {
                    status = 3;
                }
                if(currentStatus > 40) {
                    status = 4;
                }
            }
            console.log(status)

            return status > 0 ? status : this.memberState;
        }
        handleCommand () {
            // this.form.leave = item.value;
            this.getAllLeave();
        }
        chooseLeave () {
            this.getAllLeave();
        }
        loadDataForPagination() {
            this.getAllLeave()
        }
        mounted () {
            this.getAllLeave()
        }
    }
</script>
<style lang="scss" scoped>
    .bill_source{
        img{
            width: 20px;
            height: 20px;
            vertical-align: middle;
        }
    }
    .bill_source{
        display: inline-block;
        width: 45px;
        text-align: right;
        .iconfont{
            font-size: 22px;
        }
    }
</style>
<style lang="scss">
    .leave_select_right {
        .el-input__inner {
            border-top-right-radius: 4px;
            border-bottom-right-radius: 4px;
        }
    }
</style>